<template>
    <div class="list-container">
        <el-form class="search-panel" v-model="formData" :inline="true">
            <el-form-item label-width="90px" class="search-input" label="输入搜索：" prop="name" >
                <el-input v-model="formData.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="table-panel">
            <el-row class="table-operate">
                <el-breadcrumb style="display:inline-block;margin-right:30px;line-height:50px;font-size: 16px;font-weight: 600;" separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>{{serviceCorporationName}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{teamName}}</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- <el-col :span="12"> -->
                <!-- <el-button @click="toCorporation">{{serviceCorporationName}} </el-button>
                <i class="el-icon-d-arrow-right"/><el-button @click="toTeam"> {{teamName}} </el-button> -->
                <!-- </el-col>
                <el-col :span="12">
                    <el-form v-model="">
                    <el-form-item label-width="90px" class="search-input" label="输入搜索：" prop="name" >
                        <el-input v-model="inputValue" placeholder="输入姓名搜索" @input="inputSearch"></el-input>
                    </el-form-item>
                    </el-form>
                </el-col> -->
            </el-row>
            <el-table
                ref="tableData"
                :data="tableData"
                style="width: 100%"
                >
            <el-table-column
                prop="id"
                type="index"
                label="序号"
                width="80px"
                align="center"
            ></el-table-column>
            <el-table-column
                prop="name"
                label="人员姓名"
                min-width="90px"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="phone"
                label="电话"
                min-width="90px"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="workTypeName"
                label="工种"
                min-width="90px"
                align="center"
                >
            </el-table-column>
             <el-table-column
                prop="gender"
                label="性别"
                min-width="90px"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="operation"
                label="操作"
                align="center"
                min-width="100px"
                fixed="right"
                >
                <template slot-scope="scope">
                    <el-button @click="setTeamLeader(scope.row)" type="text" size="small">选择</el-button>
                </template>
            </el-table-column>
            </el-table>
            <el-row class="page">
                <div class="page-tag">
                共{{ Math.ceil(total / pageSize) }}页/{{ total }}条数据
                </div>
                <el-pagination
                   background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 50]"
                    :page-size="pageSize"
                    layout="sizes, prev, pager, next, jumper"
                    :total="total">
                >
                </el-pagination>
            </el-row>
        </div>
    </div>
</template>
<script>
import belong from'@/api/belong.js'

export default {
    data(){
        return{
            tableData:[],
            inputValue:'',
            total:0,
            pageSize:10,
            currentPage:1,
            formData:{
                name:''
            },
            teamId:this.$route.query.teamId,
            teamName:this.$route.query.teamName,
            serviceCorporationId:this.$route.query.corpId,
            serviceCorporationName:this.$route.query.corpName,
        }
    },
    methods:{
        getList(){
            belong.team({
                currentPage:this.currentPage,
                name:this.formData.name,
                open_account:'',
                pageSize:this.pageSize,
                status:'',
                team_id:this.teamId}).then(res=>{
                    this.total=res.data.data.total
                    this.tableData=res.data.data.records
                    this.tableData.forEach(function(item){
                        if(item.gender==1){
                            item.gender='男'
                        }else if(item.gender==0) {item.gender='女'}
                        else item.gender=''
                })
            })
        }, 
        onSubmit(){
            this.getList()
        },  
        toCorporation:function(){
            this.$router.push({path:'/corporation/edit/'+this.serviceCorporationId})
        },
        toTeam:function(){
            this.$router.push({path:'/team/edit/'+this.teamId})
        },
        setTeamLeader:function(row){
            // console.log(row);
            this.$confirm(
                "确定要设置他"+row.name+"为班组长吗？",
                "添加班组长",
                {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "none",
                }
            ).then(() => {
            belong.setTeamLeader(row.id,this.teamId).then(res=>{
                // console.log(res);
                this.$message({
                type: "success",
                message: "设置成功!",
                });
                this.$router.go(-1)
            })
            }).catch(()=>{
                this.$message({
                type: "info",
                message: "已取消",
                });
            })
        },
        inputSearch:function(){

        },
        //分页
        //pageSize每页条数改变时
        handleSizeChange(val){
            this.pageSize=val;
            this.getList()
        },
        //currentPage当前页改变时
        handleCurrentChange(val) {
            this.currentPage=val
            this.getList()
      }
    },
    created(){
        this.getList();
    },

}
</script>
<style scoped lang="scss">
.right-space {
  margin-right: 20px;
  padding-top: 0;
  line-height: 30px;
  width: 100px;
  height: 30px;
  border-radius: 0;
  font-size: 13px;
  margin-top: 10px;
}
</style>